<template>
	<view class="page-content" :style="{'--main-color-1':configInfo.mainColor,'--main-color-2':configInfo.mainColor1}">
		<view class="acticle-head">
			<view class="acticle-head_info p-md">
				<view class="acticle-head_info-title text-lg text-center">
					<text>{{ Item.title }}</text>
				</view>
				<view class="m-t-xs text-xs text-center" v-if="Item.author">
					<m-icon name="user-3-line" color="#fff" :text="Item.author"></m-icon>
				</view>
			</view>
			<view class="acticle-head_bg">
				<image class="acticle-head_bg-img" :src="Item.thumb_url" mode="widthFix">
			</view>
		</view>
		<view class="acticle-detail m-md section-bg p-md radius-5">
			<u-skeleton rows="10" :loading="loadingOpen" titleWidth="100%"></u-skeleton>
			<mp-html :content="this.Item.content" class="entry-content text-sm"/>
		</view>
		<view class="text-xs text-secondary flex-column flex-center">
			<text v-if="Item.update_time">{{$t('article.update-time')}}：{{ Item.update_time }}</text>
			<text class="m-t-xs">{{$t('article.issued-time')}}：{{ Item.create_time }}</text>
		</view>
		<!-- 占位视图 -->
		<view class="edgeInsetBottom"></view>
		
		<!-- 侧边小工具 -->
		<side-tools :scrollTop="scrollTop"></side-tools>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				Id:'',
				Item:[],
				scrollTop: 0,
				loadingOpen:true,
			}
		},
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
		}),
		
		async onLoad(option){
			this.Id = option.id;
			// // 设置缓存KEY
			// this.cacheKey = this.cacheKey+this.Id;
			
			// //获取缓存数据
			// this.Item = await this.Common.getCache(this.cacheKey);
			// if(this.Item)this.loadingOpen = false;
		},
		onReady(){
			// if(this.$wechat.isWechat()) this.$util.navTitle()
		},
		onShow(){
			this.getArticle();

		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			
			async getArticle(){
				let res = await this.$api.content.getArticleInfo(this.Id)
				if(res.code == 200){
					this.loadingOpen = false;
					this.Item = res.data;
					let subTitle = this.Item.sub_title
					if(subTitle){
						uni.setNavigationBarTitle({
							title: subTitle
						});
					}
				}
				if(res.code == 2004){
					this.$util.navigateBack(res.msg);
				}
				// uni.setNavigationBarTitle({
				// 	title: this.Item.title,
				// })
			}
		}
		
	}
</script>

<style lang="scss">
	page{
		background-color:var(--theme-page-bg);
	}
	.acticle-head{
		position: relative;
		&_info{
			position: relative;
			z-index: 2;
		}
		&_info-title{
			color: #fff;
			// opacity: .8;
		}
		&_bg{
			position: absolute;
			top: 0;
			z-index: 1;
			width: 100%!important;
			height: 230rpx;
			overflow: hidden;
		}
		&_bg::after{
			bottom: 0;
			content: "";
			left: 0;
			position: absolute;
			right: 0;
			top: 0;
			opacity: .55;
			background-color: #000;
			background-image: unset;
			background: -o-linear-gradient(left, #1e2125, #323a46);
			background: -webkit-gradient(linear, left top, right top, from(#1e2125), to(#323a46));
			background: linear-gradient(to right, #1e2125, #323a46);
		}
		&_bg-img{
			width: 100%;
			-o-object-fit: cover!important;
			object-fit: cover!important;
			filter: blur(5px);
			transform: scale(1.05);
		}
		&_bg-img image{
			-o-object-fit: cover!important;
			object-fit: cover!important;
		}
	}
	.acticle-detail{
		margin-top: 0rpx;
		position: relative;
		z-index: 2;
	}
	/deep/ .entry-content{
		line-height: 55rpx;
		color: var(--theme-text);
	}
	
	.m-content{
		margin: 10px 30rpx;
		padding:0 10px;
		font-size: 29rpx;
		line-height: 50rpx;
		color: $incolor-1;
		.timer{
			border-top: 1px solid $incolor-4;
			margin-top: 10px;
			padding-top: 5px;
			color: $incolor-2;
			font-size: 28rpx;
		}
		// line-height: 20px;
	}
</style>
